<template>
    <div class="pair">
        <p><strong>搜索SOOCAS</strong></p>
        <span>请把需要配对的牙刷靠近手机</span>
        <br>
         <div class="live">
            <span></span>
         <span></span>
         <span></span>
     </div>
        <!-- <img class="circleanimate" src="@/assets/njrpic/firstpic/ic_cleanmode.png" alt=""> -->
        <!-- <div class="circleanimate"></div> -->
        <p @click="bindout">跳过配对
            <i class="el-icon-arrow-right"></i>
        </p>
    </div>
</template>
<script>
export default {
    data(){
        return{}
    },
    methods:{
        bindout(){
            this.$store.commit('getBindon',true)
            this.$router.push('/index/first');
        }
    }
}
</script>
<style lang="less" scoped>
.pair{
    text-align: center;
    p:first-of-type{
        margin: 70px 0 30px;
    }
    p+span{
        color: #b7b7b7;
    }
}
        .live{
           position: relative;
           width: 300px;
           height: 300px;
           margin: 200px auto;
       }
       .live span:first-of-type{
           width: 300px;
           height: 300px;
           z-index: 0;
            -webkit-animation: living 3s linear infinite;
       }
        @keyframes living {
            0%{
                transform: scale(1);
                transform:rotate(90deg);
                opacity: 0.5;  
            }
            50%{
                transform: scale(1.7);  
                opacity: 0;   /*圆形放大的同时，透明度逐渐减小为0*/
            }
            100%{
                transform: scale(1);
                transform:rotate(-90deg);
                opacity: 0.5;
            }
        }
        @keyframes livings {
            0%{
                transform:rotate(45deg);
                opacity: 0.5;  
            }
            50%{
                // transform: scale(1.8);  
                opacity: 0;   /*圆形放大的同时，透明度逐渐减小为0*/
            }
            100%{
                transform:rotate(-45deg);
                opacity: 0.5;
            }
        }
        .live span{
            position: absolute;
            width: 300px;
            height: 300px;
            left: 0;
            bottom: 0;
            // background: #642ccd;
            border: 15px dotted  #642ccd;
            border-radius: 50%;
            -webkit-animation: livings 2s linear infinite;
            z-index: -1;
        }
        .live span:nth-child(2){
            -webkit-animation: living 3s linear infinite;
            -webkit-animation-delay: 2.5s; /*第二个span动画延迟1.5秒*/
        }
        .live span:nth-child(3){
            -webkit-animation-delay: 5s; /*第二个span动画延迟1.5秒*/
        }
</style>